import { Component, useState } from "react"
import '../css/dataContent.css'
import Hr from "./Hr";
import Export from "../api/exportApi";
export default class DataContent extends Component {
    constructor(props) {
        super();

        this.state = {
            shopItem: [],
            status: false,
            item_id: '',
            name: '',
            audition_link: '',
            category: '',
            price: '',
            description: '',
            sold: '0',
            contact_phone: '',
            contact_qq: '',
            real_name: '',
            id_number: '',
            purchase_method: localStorage.getItem("userId")
        }

    }
    componentDidMount() {
        this.itemList();
    }
    itemList = async () => {
        var list = []
        let { data } = await Export.query()
        for (let res = 0; res < data.length; res++) {
            list.push(JSON.parse(data[res]))
        }
        this.setState({ shopItem: list })
    }
    sendParentData = async (item_id) => {
        let data = {
            search_type: "1",
            item_id: item_id
        }
        let result = await Export.selectOne(data)
        this.props.reviceData(result.data)
    }
    addItem = () => {
        this.setState({ status: true })
    }
    // 添加商品
    addShop = async () => {
        console.log(this.state.sold);
        let form = new FormData()
        form.append("item_id",this.state.item_id)
        form.append("name",this.state.name)
        form.append("category",this.state.category)
        form.append("price",this.state.price)
        form.append("sold",String(this.state.sold))
        form.append("audition_link",this.state.audition_link)
        form.append("description",this.state.description)
        form.append("contact_phone",this.state.contact_phone)
        form.append("real_name",this.state.real_name)
        form.append("contact_qq",this.state.contact_qq);
        form.append("purchase_method",this.state.purchase_method)
        form.append("id_number",this.state.id_number)
        try {
            let { data } = await Export.insertMusic(form)
            if(data){
                alert("添加成功")
                this.setState({ status: true })
            }
        } catch (error) {
            alert("添加失败，请正确输入")
        }

    }
    // 购买音乐
    buyMusicHandler = async(id) =>{
        let form = new FormData()
        form.append("id",id)
        form.append("userId",localStorage.getItem('userId'))
        let {data} = await Export.buyMusic(form)
        if (data == 'FAIL'){
            alert('已出售')
        }else{
            alert('购买成功,请刷新页面')
        }
    }
    render() {
        return (
            <>
                <div className="data" >
                    <h2>商品列表</h2>
                    <button className="buy" onClick={this.addItem}>新增商品</button>
                    <button className="delete">删除商品(未开发)</button>
                    <p>
                        [Music管理员]:欢迎使用Music版权交易平台。
                    </p>
                    <Hr></Hr>
                    <div className="shopDiv">
                        {this.state.shopItem.map(item => <div className="shopItem">
                            <h2>{item.name}</h2>
                            <button className="desc" onClick={event => this.sendParentData(item.item_id)}>点击查看详细</button>
                            <button className="buy" onClick={event => this.buyMusicHandler(item.item_id)}>点击购买</button>
                        </div>)}
                        {this.state.status ?
                            <div>
                                <div class="dialog">
                                    <div class="dialogContent">
                                        {/* <p>
                                    对话框的内容
                                </p> */}
                                        <span>编号：</span>
                                        <input type="text" placeholder="ID" onChange={(event) => { this.setState({ item_id: event.target.value }) }}></input>
                                        <br />
                                        <span>名称：</span>
                                        <input type="text" placeholder="name" onChange={(event) => { this.setState({ name: event.target.value }) }}></input>
                                        <br />
                                        <span>链接：</span>
                                        <input type="text" placeholder="audition_link" onChange={(event) => { this.setState({ audition_link: event.target.value }) }}></input>
                                        <br />
                                        <span>类别：</span>
                                        <select value={this.state.category} onChange={(event) => { this.setState({ category: event.target.value }) }}>
                                            <option value="流行">流行</option>
                                            <option value="复古">复古</option>
                                            <option value="爵士">爵士</option>
                                        </select>
                                        <br />
                                        <span>价格：</span>
                                        <input type="number" placeholder="price" onChange={(event) => { this.setState({ price: event.target.value }) }}></input>
                                        <br />
                                        <span>描述：</span>
                                        <input type="text" placeholder="description" onChange={(event) => { this.setState({ description: event.target.value }) }}></input>
                                        <br />
                                        <span>状态：</span>
                                        <select value={this.state.sold} onChange={(event) => { this.setState({ sold: event.target.value }) }}>
                                            <option value="0">出售</option>
                                            <option value="1">不卖了</option>
                                        </select>
                                        <br />
                                        <span>手机号：</span>
                                        <input type="text" placeholder="手机号" onChange={(event) => { this.setState({ contact_phone: event.target.value }) }}></input>
                                        <br />
                                        <span>qq号码：</span>
                                        <input type="text" placeholder="qq号码" onChange={(event) => { this.setState({ contact_qq: event.target.value }) }}></input>
                                        <br />
                                        <span>真实名称：</span>
                                        <input type="text" placeholder="真实名称" onChange={(event) => { this.setState({ real_name: event.target.value }) }}></input>
                                        <br />
                                        <span>身份证：</span>
                                        <input type="text" placeholder="身份证" onChange={(event) => { this.setState({ id_number: event.target.value }) }}></input>
                                        <br />
                                    </div>
                                    <div class="dialogBtn">
                                        <button type="button" onClick={this.addShop}>确定</button>
                                        <button type="button" onClick={() => { this.setState({ status: false }) }}>取消</button>
                                    </div>

                                </div><div class="mask"></div>
                            </div> : <div></div>}

                    </div>




                </div>
            </>
        )
    }
}